<template>
  <div class="app-container">
    <el-form v-show="showSearch" :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="活动名称：" prop="name">
        <el-input
          v-model.trim="queryParams.name"
          placeholder="请输入活动名称"
          clearable
          style="width: 200px"
          @keyup.enter="handleSearch(true)"
        />
      </el-form-item>
      <el-form-item label="活动时间：" prop="dateRange">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD HH:mm:ss"
          :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
        />
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <ApiSelect v-model:modelValue="queryParams.status" :options="statusOptions" />
      </el-form-item>
      <el-form-item label="&nbsp;">
        <el-button @click="handleSearch(false)">重置</el-button>
        <el-button type="primary" @click="handleSearch(true)">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-button
        v-hasPermi="['storedSettings:storedSettings:add']"
        type="primary"
        icon="Plus"
        @click="handleAdd()"
        >新增</el-button
      >
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="活动名称" align="center" prop="name" />
      <el-table-column label="活动时间" width="260px" align="center">
        <template #default="{ row }">
          <div>
            {{ row.startTime + '~\n' + row.endTime }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template #default="{ row }">
          <el-tag :type="row.status === 1 ? 'success' : 'info'">{{
            statusOptions.find((i) => i.value === row.status).label
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template #default="{ row }">
          <el-button
            v-if="row.status === 2"
            link
            type="primary"
            v-hasPermi="['storedSettings:storedSettings:delete']"
            @click="handleEdit(row, false)"
          >
            删除
          </el-button>
          <el-button
            v-if="row.status === 1"
            link
            type="primary"
            v-hasPermi="['storedSettings:storedSettings:failure']"
            @click="handleEdit(row, true)"
          >
            失效
          </el-button>
          <el-button
            link
            type="primary"
            @click="handleDetails(row)"
            v-hasPermi="['storedSettings:storedSettings:details']"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <addDialog ref="addRef" @refreshList="getList" />
  </div>
</template>
<script setup>
import { getStoredListApi, putEditApi } from '@/api/storedEquity'
import addDialog from './components/addDialog'

const { proxy } = getCurrentInstance()
const statusOptions = [
  { label: '进行中', value: 1 },
  { label: '已失效', value: 2 }
]

const showSearch = ref(true)
const loading = ref(false)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  name: null,
  status: null,
  startTime: null,
  endTime: null
})
const dateRange = ref([])
const list = ref([])
const queryRef = ref()
const addRef = ref()
const total = ref(0)
/**搜索 */
function handleSearch(type) {
  if (type) {
    queryParams.value.pageNum = 1
    getList()
  } else {
    dateRange.value = []
    queryRef.value.resetFields()
    handleSearch(true)
  }
}
/**新增 */
function handleAdd() {
  addRef.value.init()
}
/**操作活动 */
function handleEdit(row, type) {
  ElMessageBox.confirm(`确认${type ? '失效' : '删除'}名为${row.name}的储值活动吗?`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
    .then(() => {
      putEditApi({ id: row.id, status: type ? 2 : 0 }).then(() => {
        proxy.$modal.msgSuccess(`${row.name}的储值活动${type ? '失效' : '删除'}成功`)
        getList()
      })
    })
    .catch((err) => console.log(err))
}

/**详情 */
function handleDetails(row) {
  addRef.value.init(row, 'details')
}
/**获取列表 */
function getList() {
  queryParams.value.startTime = dateRange.value ? dateRange.value[0] : null
  queryParams.value.endTime = dateRange.value ? dateRange.value[1] : null
  getStoredListApi(queryParams.value)
    .then((res) => {
      loading.value = false
      console.log(res)
      list.value = res?.rows || []
      total.value = res?.total || 0
    })
    .catch(() => {
      loading.value = false
    })
}
getList()
</script>

<style lang="scss" scoped></style>
